[feat] Clean up message and tool spec cards by junaway · Pull Request #4710 · Agenta-AI/agenta

junaway · 2026-06-16T06:13:33Z

Context

In the playground, tool spec cards rendered fully expanded. A prompt with several tools pushed the real config far down the panel, and the cards had spacing bugs: expanded cards collided with the next card, while collapsed cards left an oversized gap. The collapse toggle only appeared on hover, so it was easy to miss.

Changes

Tool spec cards now collapse to a header-only row by default, with a height that follows the content rather than a fixed minimum. The collapse toggle is always visible (50% opacity at rest, 100% on hover) and its hover-out timing matches the other card icons.

The spacing bug came from the editor wrapper's min-h-[70px]. The fix is min-h-0 plus symmetric padding, so expanded and collapsed cards keep the same uniform gap-2 and don't collide.

Message cards get the same always-visible toggle and a clean 1lh (one line height) collapse, but they default expanded (opposite of tools). Tool and message cards share the same left-padding alignment inside the container.

Tests / notes

Verified in the playground: tools start collapsed, messages start expanded, toggles always show, no collision or gap drift between open and closed states.

What to QA

Open a prompt with two or more tools. The tool cards start collapsed to their header. Expanding one does not push it into the next card; collapsing it does not leave a large gap.
The collapse toggle on each card is visible without hovering (lighter), and full opacity on hover.
Messages start expanded and can be collapsed to a single line via the same toggle.
Regression: editing a tool or message still works once expanded; left edges of tool and message cards line up.

vercel · 2026-06-16T06:13:38Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
agenta-documentation	Ready	Preview, Comment	Jun 17, 2026 2:33pm

coderabbitai · 2026-06-16T06:14:41Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 63f642b5-0e2a-493d-a8a4-cfaa519c9d2b

📥 Commits

Reviewing files that changed from the base of the PR and between 2996486 and e41e0a3.

📒 Files selected for processing (1)

web/packages/agenta-ui/src/ChatMessage/components/ChatMessageList.tsx

📝 Walkthrough

Summary by CodeRabbit

Style / UI Polish
- Made prompt schema controls more compact by reducing vertical spacing.
- Improved collapsible tool card layout: header/body padding alignment is more consistent, and minimized state keeps structure while hiding the editor body more cleanly.
- Updated tool/chat message editor headers: collapse toggle and actions are reorganized for clearer alignment, with action controls revealed on hover for a cleaner view.

Walkthrough

Across three files, the collapse/expand mechanism for tool item cards and chat message items is refactored from JS-driven inline getCollapseStyle height to Tailwind CSS class-based height clamping and editor-body visibility toggling. Tool cards now default to minimized = true unconditionally. Header layouts are adjusted to improve alignment, CollapseToggleButton prop signatures are simplified by removing ref wiring, and PromptSchemaControl reduces spacing to accommodate collapsed states.

Changes

CSS-class-driven collapse for tool cards and chat messages

Layer / File(s)	Summary
Remove `getCollapseStyle` imports and update `ToolHeaderProps` `web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ToolItemControl.tsx`	Drops `getCollapseStyle` import and removes `containerRef` from `ToolHeaderProps` since header-to-body ref wiring is no longer required when collapse is CSS-class-driven.
Header layout, padding, and button positioning `web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ToolItemControl.tsx`	Adds left padding (`pl-2`) to the tool header title container, refactors the action button area to position `CollapseToggleButton` in the same row as duplicate/delete controls, and applies transition/opacity classes to `CollapseToggleButton`.
Tool item collapse state and CSS-driven visibility `web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ToolItemControl.tsx`	Defaults tool minimized state to `true` unconditionally, precomputes the `header` JSX to pass into `SharedEditor` instead of constructing inline, updates `SharedEditor` className to hide the editor body via CSS selectors when minimized, and removes `containerRef` wiring from fallback paths.
Chat message collapse and control refactoring `web/packages/agenta-ui/src/ChatMessage/components/ChatMessageList.tsx`	Constrains editor wrapper height with conditional Tailwind classes instead of inline `getCollapseStyle` styles, wraps header-right controls in a hover-visibility container, and simplifies `CollapseToggleButton` to receive only `collapsed`, `onToggle`, and transition `className`.
`PromptSchemaControl` layout tweaks `web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/PromptSchemaControl.tsx`	Reduces outer container gap from `gap-3` to `gap-2` and adds `!min-h-0` on the `EditorProvider` wrapper to prevent default min-height from expanding collapsed tool cards.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 60.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title '[feat] Clean up message and tool spec cards' accurately captures the main change—reorganizing and improving the visual presentation of message and tool cards in the playground.
Description check	✅ Passed	The description is comprehensive and directly related to the changeset, explaining the context, changes, testing, and QA steps for collapsing tool and message cards.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

Create stacked PR
Commit on current branch

🧪 Generate unit tests (beta)

Create PR with unit tests
Commit unit tests in branch collapse-tool-spec-cards

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Copilot

Pull request overview

Updates the Playground’s message and tool editor cards to improve usability and layout consistency by making collapse toggles always visible and adjusting default collapsed/expanded states to reduce vertical clutter.

Changes:

Tool cards now default to collapsed (header-only), with updated padding/min-height behavior to fix gap/collision issues.
Message cards keep default expanded, but adopt the always-visible collapse toggle and a new “1lh” body-clipping approach when minimized.
Prompt schema container spacing and tool editor wrapper min-height were adjusted to better match the new collapsed layouts.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 3 comments.

File	Description
`web/packages/agenta-ui/src/ChatMessage/components/ChatMessageList.tsx`	Switches message “minimize” behavior to CSS clipping and makes the collapse toggle always visible.
`web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ToolItemControl.tsx`	Defaults tool cards to collapsed and hides the editor body when minimized; makes toggle always visible.
`web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/PromptSchemaControl.tsx`	Tightens vertical spacing and removes the editor wrapper’s fixed min-height for tools.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

coderabbitai

Actionable comments posted: 1

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 91e47168-8568-47b0-911e-5b4237d7015e

📥 Commits

Reviewing files that changed from the base of the PR and between 58a5cca and 291bca0.

📒 Files selected for processing (3)

web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/PromptSchemaControl.tsx
web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ToolItemControl.tsx
web/packages/agenta-ui/src/ChatMessage/components/ChatMessageList.tsx

github-actions · 2026-06-16T06:26:26Z

Railway Preview Environment


Preview URL	https://gateway-production-e6f6.up.railway.app/w
Image tag	`pr-4710-cadbf3c`
Status	Failed
Railway logs	Open logs
Logs	View workflow run
Updated at 2026-06-17T14:41:15.694Z

Tool spec cards rendered expanded and, when collapsed, still showed a 3-line JSON peek. Default them to collapsed and size the collapsed height to the header only (title + optional description), so no JSON shows until expanded. Collapsed height is dynamic since not every tool has a description.

Copilot

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

- Remove stray containerRef prop on ToolHeader (TS error). - Collapsed chat messages: cancel editor min-h-[70px] and hide the attachments footer + tool header so a minimized message is one line. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Revert the CSS-class max-h-[1lh] clip back to getCollapseStyle inline height animation (the established --editor-h contract); keep the hover-reveal header actions. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

coderabbitai

Actionable comments posted: 1

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 63f642b5-0e2a-493d-a8a4-cfaa519c9d2b

📥 Commits

Reviewing files that changed from the base of the PR and between 2996486 and e41e0a3.

📒 Files selected for processing (1)

web/packages/agenta-ui/src/ChatMessage/components/ChatMessageList.tsx

coderabbitai

Caution

Inline review comments failed to post. This is likely due to GitHub's internal server error or limits when posting large numbers of comments. If you are seeing this consistently it is likely a permissions issue. Please check "Moderation" -> "Code review limits" under your organization settings.

Actionable comments posted: 1

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 63f642b5-0e2a-493d-a8a4-cfaa519c9d2b

📥 Commits

Reviewing files that changed from the base of the PR and between 2996486 and e41e0a3.

📒 Files selected for processing (1)

web/packages/agenta-ui/src/ChatMessage/components/ChatMessageList.tsx

🛑 Comments failed to post (1)

web/packages/agenta-ui/src/ChatMessage/components/ChatMessageList.tsx (1)

192-195: ⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Collapsed message rows still render tool header/attachments.

When isMinimized is true, headerBottom and footer are still rendered. That breaks the intended true single-line collapsed state and can reintroduce spacing/collision issues in dense lists.

Suggested fix

-                headerBottom={
-                    isToolResponse && (msg.name || msg.tool_call_id) ? (
+                headerBottom={
+                    !isMinimized && isToolResponse && (msg.name || msg.tool_call_id) ? (
                         <ToolMessageHeader name={msg.name} toolCallId={msg.tool_call_id} />
                     ) : undefined
                 }
@@
-                footer={
-                    hasAttachmentsFlag ? (
+                footer={
+                    !isMinimized && hasAttachmentsFlag ? (
                         <MessageAttachments
                             content={msg.content!}
                             onRemove={(attachmentIndex) =>
                                 onRemoveAttachment(index, attachmentIndex)
                             }
                             disabled={disabled}
                             ImagePreview={ImagePreview}
                         />
                     ) : undefined
                 }

Also applies to: 250-260

Copilot

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.

+                        <div
+                            className={cn(
+                                flexLayouts.rowCenter,
+                                gapClasses.xs,
+                                "invisible group-hover/item:visible",
+                            )}
+                        >


+            <div className="flex items-center gap-1 shrink-0">
+                <div className="flex items-center gap-1 invisible group-hover/tool:visible">
+                    {!isReadOnly && onDuplicate && (


                <CollapseToggleButton
                    collapsed={minimized}
                    onToggle={onToggleMinimize}
-                    contentRef={containerRef}
+                    className="!transition-opacity !duration-0 !delay-200 group-hover/tool:!delay-0 opacity-50 group-hover/tool:opacity-100"
                />


                        <CollapseToggleButton
                            collapsed={isMinimized}
                            onToggle={() => onToggleMinimize(index)}
-                            contentRef={containerRef}
-                            collapsedMaxHeight={48}
+                            className="!transition-opacity !duration-0 !delay-200 group-hover/item:!delay-0 opacity-50 group-hover/item:opacity-100"
                        />


Copilot AI review requested due to automatic review settings June 16, 2026 06:13

dosubot Bot added the size:L This PR changes 100-499 lines, ignoring generated files. label Jun 16, 2026

dosubot Bot added the Frontend label Jun 16, 2026

Copilot started reviewing on behalf of junaway June 16, 2026 06:13 View session

junaway changed the title ~~feat(frontend): collapse playground tool spec cards by default~~ [feat] Clean up message and tool spec cards Jun 16, 2026

Copilot AI reviewed Jun 16, 2026

View reviewed changes

Comment thread web/packages/agenta-ui/src/ChatMessage/components/ChatMessageList.tsx

Comment thread web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ToolItemControl.tsx

Comment thread web/packages/agenta-ui/src/ChatMessage/components/ChatMessageList.tsx Outdated

coderabbitai Bot reviewed Jun 16, 2026

View reviewed changes

Comment thread web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ToolItemControl.tsx

junaway force-pushed the collapse-tool-spec-cards branch from 291bca0 to a43491d Compare June 17, 2026 10:20

vercel Bot deployed to Preview June 17, 2026 10:21 View deployment

junaway requested a review from ardaerzin June 17, 2026 10:38

Copilot AI review requested due to automatic review settings June 17, 2026 11:14

junaway force-pushed the collapse-tool-spec-cards branch from a43491d to a332291 Compare June 17, 2026 11:14

Copilot started reviewing on behalf of junaway June 17, 2026 11:15 View session

vercel Bot deployed to Preview June 17, 2026 11:15 View deployment

Copilot AI reviewed Jun 17, 2026

View reviewed changes

Comment thread web/packages/agenta-entity-ui/src/DrillInView/SchemaControls/ToolItemControl.tsx

Comment thread web/packages/agenta-ui/src/ChatMessage/components/ChatMessageList.tsx Outdated

vercel Bot deployed to Preview June 17, 2026 14:13 View deployment

fix(frontend): restore animated chat-message collapse

e41e0a3

Revert the CSS-class max-h-[1lh] clip back to getCollapseStyle inline height animation (the established --editor-h contract); keep the hover-reveal header actions. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Copilot AI review requested due to automatic review settings June 17, 2026 14:32

Copilot started reviewing on behalf of junaway June 17, 2026 14:32 View session

vercel Bot deployed to Preview June 17, 2026 14:33 View deployment

coderabbitai Bot reviewed Jun 17, 2026

View reviewed changes

Copilot AI reviewed Jun 17, 2026

View reviewed changes

ardaerzin approved these changes Jun 17, 2026

View reviewed changes

Conversation

junaway commented Jun 16, 2026

Context

Changes

Tests / notes

What to QA

Uh oh!

vercel Bot commented Jun 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Jun 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Summary by CodeRabbit

Walkthrough

Changes

Estimated code review effort

❌ Failed checks (1 warning)

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Jun 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Railway Preview Environment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

vercel Bot commented Jun 16, 2026 •

edited

Loading

coderabbitai Bot commented Jun 16, 2026 •

edited

Loading

github-actions Bot commented Jun 16, 2026 •

edited

Loading